<template>
  <div class="song">
    <div style="line-height: 50px;font-weight: 700;color: #2a2727">找到{{total}}首单曲</div>
<!--    最佳匹配-->
    <div v-if="bestMatch.artist || bestMatch.album || bestMatch.concert">
      <p style="color: #2a2727;font-size: 13px;font-weight: 700">最佳匹配</p>
      <div class="match_box">
        <!--      歌手信息-->
        <div v-if="bestMatch.artist" @click="goSingerPage" class="match_common">
          <div class="img_box">
            <img v-lazy="bestMatch.artist[0].picUrl" alt="">
          </div>
          <div class="match_info">
            <div>
              <span style="color: #2a2727;font-size: 14px">歌手: {{bestMatch.artist[0].name}}</span>
              <span v-if="bestMatch.artist[0].alias.length !== 0" style="color: #b4b1b1;font-size: 13px">({{bestMatch.artist[0].alias[0]}})</span>
            </div>
          </div>
        </div>
        <!--      专辑信息-->
        <div v-if="bestMatch.album" @click="goAlbumPage" class="match_common">
          <div class="img_box">
            <img v-lazy="bestMatch.album[0].picUrl" alt="">
          </div>
          <div class="match_info">
            <div>
              <div style="font-size: 14px">专辑: {{bestMatch.album[0].name}}</div>
              <div style="font-size: 13px;color: #aca8a8;line-height: 20px">{{bestMatch.album[0].artist.name}}</div>
            </div>
          </div>
        </div>
        <!--      演出信息-->
        <div v-if="bestMatch.concert" class="match_common">
          <div class="img_box">
            <img v-lazy="bestMatch.concert[0].cover" alt="">
          </div>
          <div class="match_info">
            <div>
              <div>演出: {{bestMatch.concert[0].title}}</div>
              <div style="font-size: 13px;color: #aca8a8;line-height: 20px">{{showDate1}} 至 {{showDate2}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <table id="table">
      <tr class="title-info">
        <td class="other"></td>
        <td class="title">音乐标题</td>
        <td class="singer">歌手</td>
        <td class="album">专辑</td>
        <td class="time">时长</td>
      </tr>
      <tr
        class="detail-info"
        :class="{ active: currentIndex === index }"
        v-for="(item, index) in songMsg"
        :key="index"
        @dblclick="addSong(index)"
        @click="trClick(index)"
      >
        <td class="other">
          <span>{{ index < 9 ? "0" + (index + 1) : index + 1 }}</span>
          <img
            @click="btnClick(index)"
            v-show="spanIndex.indexOf(index) === -1"
            src="~@/assets/img/songlistdetail/collect2.svg"
            alt=""
          />
          <img
            @click="btnClick(index)"
            v-show="spanIndex.indexOf(index) !== -1"
            src="~@/assets/img/songlistdetail/collect3.svg"
            alt=""
          />
          <img src="~@/assets/img/songlistdetail/download2.svg" alt="" />
        </td>
        <td class="title"
            :class="{dbActive: $store.state.playContent.playId === item.id}">
          {{ item.name }}
        </td>
        <td class="singer">{{ item.ar[0].name }}</td>
        <td class="album">{{ item.al.name }}</td>
        <td class="time">{{item.dt | filterTime}}</td>
      </tr>
    </table>
    <!--  分页按钮-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="30"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
  import {home} from "@/network/home";
  import { format, formatDate } from '@/components/common/utilis'

  export default {
    name: "SearchSong",
    data(){
      return{
        key:this.$route.params.data,  //当前搜索词
        songMsg:[],  //歌曲数据
        total:0,      //歌曲总数
        spanIndex: [], //保存歌曲的索引
        currentIndex: "",
        currentPage:0,  //当前页
        bestMatch:{},   //最佳匹配数据
      }
    },
    computed:{
      showDate1(){
        const date = new Date(this.bestMatch.concert[0].time[0])
        return formatDate(date, 'MM月dd日')
      },
      showDate2(){
        const date = new Date(this.bestMatch.concert[0].time[0])
        return formatDate(date, 'MM月dd日')
      },
    },
    filters:{
      // 格式化歌曲时间
      filterTime(value){
        return format(value/1000)
      }
    },
    created() {
      //获取搜索数据
      this.getSearch(this.key)
      //获取最佳匹配数据
      this.getBestMatch(this.key)
    },
    watch:{
      //监听搜索数据是否改变，若改变请求新的数据渲染（好像监听不到key改变,只能用"$route.params.data"）
      "$route.params.data"(){
        this.getSearch(this.$route.params.data)
        this.getBestMatch(this.$route.params.data)
      },
    },
    methods:{
      //点击按钮收藏歌曲，再点击取消收藏，可以多个同时点击的方法
      btnClick(index) {
        let result = this.spanIndex.indexOf(index);
        if (result === -1) {
          this.spanIndex.push(index);
        } else this.spanIndex.splice(result, 1);
      },
      //点击tr改变背景颜色的方法
      trClick(index) {
        this.currentIndex = index;
      },
      //双击添加歌曲信息的方法
      addSong(index) {
        const songContent = {};
        songContent.playId = this.songMsg[index].id;
        songContent.playImg = this.songMsg[index].al.picUrl;
        songContent.playName = this.songMsg[index].name;
        songContent.player = this.songMsg[index].ar[0].name;
        // footer里的组件要是监听到添加了a属性会做出响应
        songContent.a = ''
        this.$store.commit("addSongs", songContent);
      },
      //最佳匹配中的路由跳转
      goSingerPage(){
        this.$router.push('/album/id=' + this.bestMatch.artist[0].id)
      },
      goAlbumPage(){
        this.$router.push('/album/song/id=' + this.bestMatch.album[0].id)
      },
      //点击分页切换页数的方法
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getSearch(this.key,this.currentPage * 30)
      },

      //获取搜索数据的函数
      getSearch(key,offset){
        //"1"为单曲
        home.getSearch(key, 1, offset).then(res => {
          this.songMsg = res.data.result.songs
          this.total = res.data.result.songCount
        })
      },
      //获取最佳匹配数据的函数
      getBestMatch(key){
        home.getBestMatch(key).then(res => {
          this.bestMatch = res.data.result
        })
      },
    },
  }
</script>

<style scoped>
.song{
  padding: 10px 50px;
}
/*最佳匹配*/
.match_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.match_common{
  width: 370px;
  height: 80px;
  margin: 10px 20px 10px 0;
  display: flex;
  border-radius: 5px;
  background-color: #F4F4F4;
  cursor: pointer;
}
.img_box{
  width: 80px;
  height: 80px;
}
.img_box img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.match_info{
  flex: 1;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}
.match_info>div>div{
  width: 270px;
  line-height: 20px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: #1c1919;
}

/*歌单列表*/
table {
  font-size: 13px;
}
table tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr td {
  display: inline-block;
  line-height: 35px;
  color: #2a2727;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
table tr:hover {
  background-color: #f0f1f2;
}
.title-info td {
  font-size: 14px;
  color: #959090;
}
.other {
  width: 100px;
  color: #959090;
  padding-left: 8px;
}
.other img {
  position: relative;
  top: 5px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-left: 6px;
}
.detail-info td{
  color: #8b7d7d;
}
.detail-info .title{
  color: #363333;
}
.title {
  width: 300px;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
.singer {
  width: 180px;
  padding: 0 20px;
}
.album {
  width: 250px;
}
.time {
  width: 100px;
  padding: 0 20px;
}
/*此处用个id选择器，因为有可能因为权重问题让这个样式被覆盖*/
#table .active {
  background-color: #e5e5e5;
}
#table .dbActive{
  color: #f14465;
}
/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}

</style>
